<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base href="/"/>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>***|登录</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" th:href="@{bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{dist/css/AdminLTE.min.css}">
    <link rel="stylesheet" th:href="@{plugins/iCheck/square/blue.css}">
    <script th:src="@{plugins/jQuery/jquery-2.2.3.min.js}"></script>
    <script th:src="@{bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{plugins/iCheck/icheck.min.js}"></script>
</head>
<body class="hold-transition login-page">
<div class="login-box">
    <div class="login-logo">
        <a href="#"><b>***</b>后台管理</a>
    </div>
    <div class="login-box-body">
        <form id="loginform" th:action="@{/manage/login}"
              th:method="post">
            <div class="form-group has-feedback">
                <input name="username" data-th-value="${username}" id="username" class="form-control"
                       placeholder="用户名"> <span
                    class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input name="userpassword" type="password" class="form-control"
                       placeholder="密码"> <span
                    class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <div class="row">
                    <div class="col-xs-6">
                        <input type="text" name="code" class="form-control"
                               placeholder="验证码"/>
                    </div>
                    <div class="col-xs-6">
                        <img id="imgObj" alt="验证码" src="/manage/validateCode"
                             onclick="changeImg();"/>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="checkbox">
                    <label> <input name="rememberMe" type="checkbox">
                        下次自动登录
                    </label>
                </div>
            </div>
            <div class="box-footer">
                <button type="submit" class="btn btn-primary pull-right">登录</button>
            </div>
        </form>
        <div data-th-if="${msg}!=null" class="alert alert-warning alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <p data-th-text="${msg}"></p>
        </div>
    </div>
</div>
<script>
    $(function () {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' // optional
        });
    });

    // 刷新图片
    function changeImg() {
        $("#imgObj").attr("src", "/manage/validateCode?" + Math.random());
    }
</script>
</body>
</html>
